<template>
  <div>
    <!-- 头部 -->
    <home-header/>
    <!-- 页面内容 -->
    <!-- 下拉刷新 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <div class="content">
      <!-- 轮播 -->
      <van-swipe
        class="my-swipe"
        :autoplay="3000"
        indicator-color="white"
      >
        <van-swipe-item
          v-for="banner in banners"
          :key="banner.id"
        >
        <img :src="banner.picUrl" alt="">
        </van-swipe-item>
      </van-swipe>
      <!-- grid九宫导航 -->
      <div class="cate-list">
        <van-grid clickable column-num="4">
        <van-grid-item
          icon-size="100px"
          v-for="(cate) in cates"
          @click="clickItemList(cate.id)"
          :key="cate.id+1"
          :icon="cate.icon"
          :text="cate.name" />
        </van-grid>
      </div>
      <div class="today-recommend">
        <!-- 今日推荐 -->
        <recommend
        :items="items"
        @clickItem="clickItem"
        @clickAdd="clickCart"
        />
      </div>
    </div>
    </van-pull-refresh>
    <!-- 底部 -->
    <my-tabbar></my-tabbar>
    </div>
</template>

<script>
import HomeHeader from './components/HomeHeader'
import Recommend from './components/Recommend'
import MyTabbar from '@/components/MyTabbar'
import { fetchBanner, fetchCate, fetchItems } from 'api'
import { mapMutations } from 'vuex'
import { Toast } from 'vant'
export default {
  data () {
    return {
      isLoading: false, // 控制下拉刷新
      banners: [],
      cates: [],
      recommendId: 183473, // 默认推荐分类id
      items: []// 默认推荐商品
    }
  },
  created () {
    this.fetchBanners()
    this.fetchCates()
    this.fetchItems()
  },
  methods: {
    clickCart (item) {
      // 点击加入购物车
      // console.log(item)
      item = {
        ...item,
        num: 1,
        checked: true
      }
      // 添加购物车之前进行判断，如果已经有，数量+1,没有则添加
      this.add_cart(item)
      Toast('宝贝已添加到购物车，快去看看吧！')
    },
    // 点击跳转至列表页
    clickItemList (cateId) {
      this.$router.push(`/itemlists/${cateId}`)
    },
    // 点击首页商品跳转至详情页
    clickItem ({ itemId }) {
      // alert(itemId)
      this.$router.push(`/detail/${itemId}`)
    },
    // 下拉刷新
    onRefresh () {
      setTimeout(() => {
        // 此处调用刷新数据需要用的请求函数
        this.fetchItems()
      }, 1000)
    },
    // 获取轮播图接口数据
    fetchBanners () {
      fetchBanner().then(res => {
        // console.log(res)
        if (res.data.code === 0) {
          this.banners = res.data.data
        }
      })
    },
    // 获取商品分类数据
    fetchCates () {
      fetchCate().then(res => {
        // console.log(res)
        if (res.data.code === 0) {
          this.cates = res.data.data
        }
      })
    },
    // 获取首页商品列表
    fetchItems () {
      fetchItems({
        categoryId: this.recommendId
      }).then(res => {
        this.isLoading = false
        if (res.data.code === 0) {
          this.items = res.data.data
        }
      })
    },
    ...mapMutations('cart', ['add_cart'])
  },
  components: {
    HomeHeader,
    MyTabbar,
    Recommend
  }
}
</script>

<style lang="scss" scoped>

.content{
  margin-top:50px;
  margin-bottom:50px;
  .my-swipe{
    img{
      width: 100%;
      height: 200px;
    }
  }
 /deep/.van-grid-item__icon {
      font-size: 72px;
    }
}
</style>
